<template>
    <el-row class="section">
        <el-col :span="6">
            <div style="margin-top: 20px; margin-left: 20px;">
                服务分类
            </div>
            <div style="margin-top: 20px; margin-left: 20px;">
                <el-input v-model="searchName" placeholder="请输入服务" @keyup.enter.native="queryServiceProjectType" />
            </div>
            <div style="margin-top: 30px;">
                <el-menu default-active="2">
                    <el-menu-item v-for="(item, index) in filteredData" :key="index" :index="item.id.toString()"
                        @click.native="getItemDetail(item.id)">
                        <span slot="title">{{ item.name }}</span>
                    </el-menu-item>
                </el-menu>
            </div>
        </el-col>
        <el-col :span="18">
            <div style="margin-top: 20px; margin-left: 20px;">
                服务项目
            </div>
            <el-form :inline="true">
                <el-form-item class="offset">
                    <template slot="label">
                        <span>项目名称</span>
                    </template>
                    <el-input v-model="orderParam.projectName" size="medium" placeholder="请输入"
                        style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="启用状态" class="offset">
                    <el-select v-model="orderParam.status" placeholder="请选择">
                        <el-option label="启用" value="1"></el-option>
                        <el-option label="禁用" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-button style="margin-top: 28px;" type="primary" @click="getItemDetail(orderParam.id)">搜索</el-button>
                <el-button style="margin-top: 28px;" @click="clear">重置</el-button>
            </el-form>
            <el-button style="margin-top: 28px;" type="primary" @click="dialogFormVisible = true">新增项目</el-button><br>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="projectCode" label="项目编码">
                </el-table-column>
                <el-table-column prop="projectImg" label="项目图片">
                    <template slot-scope="scope">
                        <img :src="scope.row.projectImg" style="width:55px;height:55px">
                    </template>
                </el-table-column>
                <el-table-column prop="projectName" label="项目名称" width="100px">
                </el-table-column>
                <el-table-column prop="projectAmount" label="项目金额">
                </el-table-column>
                <el-table-column prop="projectTypeName" label="项目类别">
                </el-table-column>
                <el-table-column prop="expensesTypeName" label="项目费用类型">
                </el-table-column>
                <el-table-column prop="status" label="启用状态" width="80px">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status === '1'" style="color: green;">启用</span>
                        <span v-else style="color: red;">禁用</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" style="color: blue;" @click="edit(scope.row.id)">编辑</el-button>
                        <el-button type="text"
                            :style="scope.row.status == 1 ? { color: 'chocolate' } : { color: 'blue' }"
                            @click="updateStatus(scope.row.id)">
                            {{ scope.row.status == 1 ? '禁用' : '启用' }}
                        </el-button>
                        <el-button type="text" style="color: red;" @click="del(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <el-col :span="12" style="margin-left: 800px;">
            <!-- 放分页部分 -->
            <el-pagination background :page-sizes="[3, 5, 10, 20]" :page-size="pageSize" :current-page="pageNum"
                layout="total, sizes, prev, pager, next" @next-click="nextPage" @prev-click="prevPage"
                @size-change="sizeChange" @current-change="currentPage" :total="total"></el-pagination>
        </el-col>
        <el-dialog title="新建项目" :visible.sync="dialogFormVisible">
            <el-form>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="项目编码">
                            <el-input v-model="registerParam.projectCode" placeholder="请输入"
                                style="width: 200px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="项目名称">
                            <el-input v-model="registerParam.projectName" placeholder="请输入"
                                style="width: 200px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="项目金额">
                            <el-input v-model="registerParam.projectAmount" placeholder="请输入"
                                style="width: 200px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="项目类别">
                            <el-select v-model="registerParam.projectType" placeholder="请选择">
                                <el-option v-for="projectType in projectTypeDate" :key="projectType.id"
                                    :label="projectType.name" :value="projectType.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="费用种类">
                            <el-select v-model="registerParam.expensesType" placeholder="请选择">
                                <el-option v-for="expensesType in expensesTypeDate" :key="expensesType.id"
                                    :label="expensesType.name" :value="expensesType.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="启动状态">
                            <el-radio-group v-model="registerParam.status">
                                <el-radio label="1">启用</el-radio>
                                <el-radio label="0">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="项目简介">
                            <el-input v-model="registerParam.remark" type="textarea" placeholder="请输入"
                                style="width: 600px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="图片上传">
                    <el-upload action="api/project/upload" :show-file-list="false" :on-success="handleAvatarSuccess">
                        <div slot="trigger"
                            style="width: 100px; height: 100px; border: 1px dashed #d9d9d9; display: flex; align-items: center; justify-content: center;">
                            <img v-if="imageUrl" :src="imageUrl"
                                style="max-width: 100%; max-height: 100%; object-fit: contain;" /> <i v-else
                                class="el-icon-plus avatar-uploader-icon"></i>
                        </div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="insert">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="编辑项目" :visible.sync="putawayVisible">
            <el-form>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="项目编码">
                            <el-input disabled v-model="param.projectCode" placeholder="请输入"
                                style="width: 200px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="项目名称">
                            <el-input v-model="param.projectName" placeholder="请输入" style="width: 200px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="项目金额">
                            <el-input v-model="param.projectAmount" placeholder="请输入" style="width: 200px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="项目类别">
                            <el-select v-model="param.projectType" placeholder="请选择">
                                <el-option v-for="projectType in projectTypeDate" :key="projectType.id"
                                    :label="projectType.name" :value="projectType.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="费用种类">
                            <el-select v-model="param.expensesType" placeholder="请选择">
                                <el-option v-for="expensesType in expensesTypeDate" :key="expensesType.id"
                                    :label="expensesType.name" :value="expensesType.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="启动状态">
                            <el-radio-group v-model="param.status">
                                <el-radio label="1">启用</el-radio>
                                <el-radio label="0">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="项目简介">
                            <el-input v-model="param.remark" type="textarea" placeholder="请输入"
                                style="width: 600px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="图片上传">
                    <el-upload action="api/project/upload" :show-file-list="false" :on-success="handleAvatarSuccess1">
                        <div slot="trigger"
                            style="width: 100px; height: 100px; border: 1px dashed #d9d9d9; display: flex; align-items: center; justify-content: center;">
                            <img v-if="imageUrl" :src="imageUrl"
                                style="max-width: 100%; max-height: 100%; object-fit: contain;" /> <i v-else
                                class="el-icon-plus avatar-uploader-icon"></i>
                        </div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="putawayVisible = false">取 消</el-button>
                <el-button type="primary" @click="update">确 定</el-button>
            </div>
        </el-dialog>
    </el-row>
</template>
<script>
export default {
    data() {
        return {
            putawayVisible: false,
            dialogFormVisible: false,
            projectTypeData: [],  // 存储所有服务信息
            searchName: '',  // 用户输入的查询
            filteredData: [],  // 存储满足查询的结果
            tableData: [],
            pageNum: 1,
            pageSize: 5,
            total: 0,
            imageUrl: "", //图片在文件服务器中的地址
            imageUrl1: "",
            orderParam: {
                projectName: '',
                status: '',
                id: ''
            },
            expensesTypeDate: [],
            projectTypeDate: [],
            registerParam: {
                projectCode: '',
                projectName: '',
                projectAmount: '',
                projectType: '',
                expensesType: '',
                status: '1',
                remark: '',
                projectImg: ''
            },
            param: {
                projectCode: '',
                projectName: '',
                projectAmount: '',
                projectType: '',
                expensesType: '',
                status: '',
                remark: '',
                projectImg: ''
            }
        }
    },
    methods: {
        clear() {
            this.orderParam = {};
        },
        prevPage(val) {
            //点击上一页触发
            this.pageNum = val;
            this.getItemDetail();
        },
        nextPage(val) {
            //点击下一页触发
            this.pageNum = val;
            this.getItemDetail();
        },
        sizeChange(val) {
            //val每一页条数
            this.pageNum = 1;
            this.pageSize = val;
            this.getItemDetail();
        },
        currentPage(val) {
            this.pageNum = val;
            this.getItemDetail();
        },
        queryCondition() {
            this.pageNum = 1;
            this.getItemDetail();
        },
        //查询服务分类信息
        queryServiceProjectType() {
            this.filteredData = this.projectTypeData.filter(item => item.name.includes(this.searchName));
        },
        //根据服务分类查询服务分类详情
        getItemDetail(id) {
            let pageParam = {};
            pageParam.pageNum = this.pageNum;
            pageParam.pageSize = this.pageSize;
            this.orderParam.id = id
            pageParam.param = this.orderParam;
            this.$axios.post('api/project/queryProject', pageParam)
                .then(res => {
                    if (res.data.code == 200) {
                        let pageData = res.data.data;
                        this.tableData = pageData.list;
                        //给分页参数赋值
                        this.total = pageData.total;
                        this.pageNum = pageData.pageNum;
                        this.pageSize = pageData.pageSize;
                    }
                })
        },
        //查询项目类别
        queryProjectType() {
            this.$axios.get('api/dict/queryDict/' + 57)
                .then(res => {
                    if (res.data.code == 200) {
                        this.projectTypeDate = res.data.data
                    }
                })
        },
        //查询费用类别
        queryExpensesType() {
            this.$axios.get('api/dict/queryDict/' + 61)
                .then(res => {
                    if (res.data.code == 200) {
                        this.expensesTypeDate = res.data.data
                    }
                })
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = res.data
        },
        handleAvatarSuccess1(res, file) {
            this.imageUrl = res.data
        },
        insert() {
            this.registerParam.projectImg = this.imageUrl;
            this.$axios.post('api/project/insertProject', this.registerParam)
                .then(res => {
                    if (res.data.code == 200) {
                        this.$message.success("添加成功")
                        this.dialogFormVisible = false
                        this.getItemDetail(this.orderParam.id)
                    } else if (res.data.code == 2006) {
                        this.$message({
                            type: 'error',
                            message: '内容为空!'
                        });
                    } else {
                        this.$message({
                            type: 'error',
                            message: '项目编码重复!'
                        });
                    }
                })
        },
        del(val) {
            this.$confirm('确认删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //发删除请求
                this.$axios.get('api/project/deleteProject/' + val)
                    .then(res => {
                        if (res.data.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getItemDetail(this.orderParam.id)
                        }
                    })
            }).catch(() => {
                // 用户取消确认，不需要执行任何操作
            });
        },
        updateStatus(val) {
            this.$axios.get('api/project/updateProjectStatus/' + val)
                .then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                        this.getItemDetail(this.orderParam.id)
                    }
                })
        },
        edit(val) {
            this.putawayVisible = true;
            this.$axios.get('api/project/queryById/' + val)
                .then(res => {
                    if (res.data.code == 200) {
                        this.param = res.data.data
                        this.imageUrl = this.param.projectImg
                    }
                })
        },
        update() {
            this.$axios.post('api/project/updateProject', this.param)
                .then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '编辑成功!'
                        });
                        this.putawayVisible = false
                        this.getItemDetail(this.orderParam.id)
                    } else if (res.data.code == 2006) {
                        this.$message({
                            type: 'error',
                            message: '内容为空!'
                        });
                    }
                })
        }
    },
    created() {
        this.queryExpensesType();
        this.queryProjectType();
        // 在程序创建的时候先获取所有情报信息，并储存到projectTypeData中
        this.$axios.get('api/dict/queryDict/' + 57)
            .then(res => {
                if (res.data.code == 200) {
                    this.projectTypeData = res.data.data
                    this.filteredData = this.projectTypeData;
                }
                // 如果服务分类数据不为空，展示第一项服务分类的详细信息
                if (this.filteredData.length > 0) {
                    this.getItemDetail(this.filteredData[0].id)
                }
            });
    },
    watch: {
        // 当用户输入查询时进行过滤
        searchName() {
            this.queryServiceProjectType();
        }
    }
}
</script>

<style scoped>
.section {
    width: 1300px;
    height: 800px;
    background-color: white;
    margin-left: 50px;
    margin-top: 50px;
}

.offset {
    margin-top: 25px;
    margin-left: 50px;
}

.offset1 {
    margin-left: 1px;
}

.offset2 {
    margin-left: 100px;
}

.info {
    display: flex;
    align-items: center;
}

.line {
    width: 3px;
    /* 改变线的宽度 */
    height: 20px;
    /* 改变线的高度 */
    background-color: rgb(0, 174, 255);
    /* 改变线的颜色 */
    margin-right: 8px;
}

.text {
    color: rgb(0, 174, 255);
}
</style>